<template>
	<div class="r-header">
		<div class="r-title">{{ props.title }}</div>
		<div class="r-userinfo">
			<el-icon class="r-bell"><BellFilled color="#eee" /></el-icon>
			<el-avatar :icon="UserFilled" :size="32" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { BellFilled, UserFilled } from "@element-plus/icons-vue"
import { defineProps } from "vue"

const props = defineProps({
	title: {
		type: String,
		default: "网站",
	},
})
</script>

<style scoped>
.r-title {
	font-size: 16px;
	color: #fff;
	margin: 0 12px;
}
.r-header {
	width: 100%;
	height: 50px;
	background-color: #1e1e20;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.r-userinfo {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	margin: 0 20px;
}
.r-bell {
	margin: 0 12px;
	cursor: pointer;
}
</style>
